const worker = new Worker('worker.js')

worker.addEventListener('message', ({data}) => {
  log('从worker线程，拿到的数据：', data)
})

var Main = {
  data() {
    return {
      imageUrl: '',
      clickCount: 0
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    worker.terminate()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // //  1. 测试 FileReader的限制 2. 测试js单线程的 3. 测试 js 事件队列
      // this.testFileReaderLimitAndSingleThread(file)
      // // 2. 测试 开启后台
      // this.testFileReaderWorker(file)
      // 3.开启worker 并且做大文件 md5
      this.testFileMultipleUpload(file)
      // 不让组件触发上传接口
      return false
    },
    showLog() {
      this.$message.success(`点击了${++this.clickCount}次`)
    },
  /**
   * @description 1. 测试 FileReader的限制 2. 测试js单线程的 3. 测试 js 事件队列
   * @param file:File 需要计算md5的文件
   */
    testFileReaderLimitAndSingleThread(file) {
      const timeTemp = TimeTemp.create()
      const mbUnit = 1024 * 1024
      // 能够正常读取
      const chunkSize = 1 * 1024 * mbUnit
      // 设置为 2G 的时候 直接 error
      // const chunkSize = 2 * 1024 * mbUnit
      const chunk = file.slice(0, chunkSize)

      new FileReaderSecondry(
        chunk,
        'readAsArrayBuffer',
        ({ target: { result } }) => {
          // 备注： 此时由于计算md5 速率比较慢 并且由于 js 是单线程 所以会导致 页面假死的情况
          // 具体表现为：
          // 1. 点击页面内的 【显示弹框】 按钮的时候
          // 2. 页面不会展示出来  this.$message.success('点击了') toast
          // 3. 如果多次点击的情况下计算完成后，会【一次性】全部弹出刚才的弹框
          // 这里也从侧面展示出来了 js 的事件队列的形式
          timeTemp.start()
          const md5 = SparkMD5.ArrayBuffer.hash(result)
          timeTemp.end()
          log('md5值为：', md5)
          log('计算用时为：', timeTemp.getTemp())
        }
      )
    },
    /**
     * @description 开启后台计算线程
     * @param file:File 需要计算md5的文件
     */
    testFileReaderWorker(file) {
      const mbUnit = 1024 * 1024
      // 能够正常读取
      const chunkSize = 1 * 1024 * mbUnit
      const chunk = file.slice(0, chunkSize)

      new FileReaderSecondry(
        chunk,
        'readAsArrayBuffer',
        ({ target: { result } }) => {
          // 开启多线程
          // 此时 后台计算md5
          // 点击页面内的 【显示弹框】 按钮的时候
          // 可以展示 this.$message.success('点击了') toast
          worker.postMessage({ chunk, result, type: 'hash' })
        }
      )
    },

    testFileMultipleUpload(file) {
      // 使用 分片功能
      worker.postMessage({ file, type: 'multiple' })
    }
  },
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')


let iosMd5 = 'cf4a4a12a6f8d9d9cb0ec6cbe181e776'

let curMd5 = 'd41d8cd98f00b204e9800998ecf8427e'
